<template>
  <div class="flex flex-row">
    <div class="log-img">
      <div>
        <img
          src="../../../public/picture/learning.png"
          style="height: 80%; width: 80%"
        />
      </div>
    </div>
    <div class="login">
      <img
        src="../../../public/picture/logo.png"
        style="height: auto; width: 60%"
      />

      <div class="flex flex-col items-center w-[60%] mb-3">
        <div class="mb-3">
          <label
            for="username"
            class="block font-medium leading-6 text-gray-900"
          >Username</label>
          <div class="relative mt-2 rounded-md shadow-sm">
            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
              👤
            </div>
            <input
              v-model="username"
              type="text"
              name="text"
              id="username"
              class="block w-[320px] rounded-md border-0 py-1.5 pl-10 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
              placeholder="请输入用户名"
            />
          </div>
        </div>
        <div>
          <label
            for="password"
            class="block font-medium leading-6 text-gray-900"
          >Password</label>
          <div class="relative mt-2 rounded-md shadow-sm">
            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
              🔑
            </div>
            <input
              v-model="password"
              type="password"
              name="password"
              id="password"
              class="block w-[320px] rounded-md border-0 py-1.5 pl-10 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
              placeholder="请输入密码"
            />
          </div>
        </div>
        <div
          class="w-[320px] my-2"
          style="text-align: left"
        >
          <el-checkbox v-model="remember">记住密码</el-checkbox>
        </div>
        <button
          class="btn w-[320px] mb-3"
          @click="login"
        >登录</button>
        <div
          class="w-[320px]"
          style="text-align: center"
        >
          我是新用户,还没有账号?<a
            href="/register"
            class="text-indigo-600"
          >立刻注册</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import service from '../../service/service'
import { useUserStore } from '../../stores/user'
const userStore = useUserStore();
const router = useRouter();
const username = ref('');
const password = ref('');
const remember = ref(false);

// 检查本地存储中是否保存了用户名和密码
const savedUsername = localStorage.getItem('username')
const savedPassword = localStorage.getItem('password')

// 如果本地存储中有保存的用户名和密码，则填充到输入字段中
if (savedUsername && savedPassword) {
  username.value = savedUsername
  password.value = savedPassword
  remember.value = true
}

const login = () => {
  const requestData = {
    data: { username: username.value, password: password.value },
  }
  service({
    method: 'post',
    url: '/login',
    data: requestData,
  })
    .then((result) => {
      const res = result.data
      localStorage.setItem('token', result.data.token)
      if (res.code === 200) {
        router.push({ path: '/courselist' })
        if (remember.value === true) {
          localStorage.setItem('username', username.value)
          localStorage.setItem('password', password.value)
        } else {
          localStorage.removeItem('username')
          localStorage.removeItem('password')
        }
        service({
          method: 'get',
          url: '/wuli-user/' + res.data.user.id,
        }).then((result) => {
          if (result.data.code === 200) {
            console.log(result.data)
            const data = result.data.data;
            userStore.userinfo.email = data.email;
            userStore.userinfo.username = data.username;
            userStore.userinfo.phone = data.phone;
            userStore.userinfo.gender = data.gender;
            userStore.userinfo.avatar = data.avatar;
            userStore.userinfo.remark = data.remark;
            userStore.userinfo.id = data.id;
            userStore.userinfo.role = data.role;
            userStore.userinfo.name = data.name;
          }
          console.log(userStore.userinfo.id)
        })
        ElMessage({
          message: '登录成功',
          type: 'success',
        })
      } else {
        ElMessage({
          message: '登录失败',
          type: 'error',
        })
      }
    })
    .catch((err) => {
      console.log(err)
    })
}
</script>

<style>
.log-img {
  width: 70%;
  height: 100vh;
  background-image: url('../public/picture/bg.png');
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login {
  width: 30%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.btn {
  background: #2f025d;
  background-image: -webkit-linear-gradient(top, #2f025d, #8c279f);
  background-image: -moz-linear-gradient(top, #2f025d, #8c279f);
  background-image: -ms-linear-gradient(top, #2f025d, #8c279f);
  background-image: -o-linear-gradient(top, #2f025d, #8c279f);
  background-image: linear-gradient(to right, #2f025d, #8c279f);
  -webkit-border-radius: 30;
  -moz-border-radius: 30;
  border-radius: 15px;
  font-family: Arial;
  color: #ffffff;
  font-size: 15px;
  padding: 5px 20px 5px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #2f025d;
  text-decoration: none;
}
</style>